<template>
	<view class="bbl-content">
		<view class="uni-padding-wrap uni-common-mt">
			<view class="bbl-content_video">
				<video id="svideo" :src="src" :controls="false" :show-center-play-btn="false" :poster="poster"
					:videoTitle="videoTitle" @play="_play" @pause="_pause" @error="_error" @timeupdate="_timeupdate"
					@loadedmetadata="_loadedmetadata" @ended="_ended" @fullscreenchange="_fullscreenchange" @waiti="_waitin" @click="_vclk">
					<!--顶部栏 竖屏-->
					<cover-view class="video-control" v-if="isMenu" @tap.stop>
						<cover-view class="video-control-back" @tap.stop="_backup">
							<cover-image :src="VIcon.backup"></cover-image>
						</cover-view>
						<cover-view class="video-control-text" v-if="fullInfo.fullScreen" @tap.stop="_backup">
							{{ResVideoTitle}}
						</cover-view>
						<cover-view class="video-control-more" v-if="fullInfo.fullScreen">
							<cover-image :src="VIcon.more"></cover-image>
						</cover-view>
					</cover-view>

					<!--右侧播放速度菜单 竖屏-->
					<cover-view class="video-heizith-menu" v-if="!fullInfo.fullScreen">
						<cover-view class="video-control-item" @tap.stop="_showSwitchRate">x {{DSpeed.curRate}}</cover-view>
					</cover-view>
					
					<!--播放暂停区域 非全共用-->
					<cover-view class="video-control-playOrPause" :style="[{'margin-top': fullInfo.fullScreen ? VVideo.height * 1.43 + 'rpx' : VVideo.height * 0.63 + 'rpx','margin-left': fullInfo.fullScreen ? VVideo.width * 0.23 + 'rpx' : VVideo.width * 0.06 + 'rpx'}]" 
						v-if="isMenu" @tap.stop="_playPause">
						<cover-image :src="VVideo.isPlay ? VIcon.play : VIcon.pause" mode="aspectFit"></cover-image>
					</cover-view>
					
					<!--全屏左侧锁定-->
					<!-- <cover-view class="video-hz-lock" v-if="fullInfo.fullScreen && isMenu" @tap.native.stop="_lock">
						<cover-image :src="srcLock"></cover-image>
					</cover-view> -->
					
					<!--底部栏-->
					<cover-view class="video-control-bottom" v-if="isMenu" @tap.stop>
						<!--时间区域-->
						<cover-view class="video-control-bottom-time">
							{{VVideo.currtime}}/{{VVideo.druation}}
							<!-- 00:00:00/00:00:00 -->
						</cover-view>
						<!--进度条区域-->
						<cover-view class="video-control-bottom-bar" :style="[{width:PBar.dBWidth +'rpx'}]"  @tap.stop='_barclk'>
							<!--灰色进度条区域-->
							<cover-view class="video-control-bottom-bar-gray">
								<!--动态有进度进度条区域-->
								<cover-view class="video-control-bottom-bar-color" :style="[{width:PBar.dotSlide + 'rpx'}]">
								</cover-view>
							</cover-view>
							<cover-view class="video-control-bottom-bar-dot" :style="[{left:PBar.dotSlide + 'rpx'}]"
								@touchmove.stop.prevent="_moveDot" @touchstart="_touchstartDot" @touchend="_touchendDot">
								<cover-view class="video-control-bottom-bar-dot-pad"></cover-view>
							</cover-view>
						</cover-view>
						<cover-view class="video-fullScree-speed" v-if="fullInfo.fullScreen" @tap.stop="_showSwitchRate">x {{DSpeed.curRate}}</cover-view>
						<!--全屏按钮区域-->
						<cover-view class="video-control-bottom-fullScree" @tap.stop="_fullscree">
							<cover-image :src="VVideo.isFull ? VIcon.efull : VIcon.full"></cover-image>
						</cover-view>
					</cover-view>
					<!--播放倍速面板-->
					<cover-view class="multi-list rate" :class="{ active: DSpeed.rMenu }" @tap.stop>
						<cover-view v-for="(item, index) in ['0.5', '1.0', '1.5', '2.0','2.5','3.0']" :key="index"
							class="multi-item rate" :data-rate="item" @tap.stop="_switchRate"
							:class="{ active: item == DSpeed.curRate }">
							{{ item }}
						</cover-view>
					</cover-view>
				</video>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			src: { //视频路径
				type: String,
				default: ''
			},
			videoTitle: { //视频标题
				type: String,
				default: ''
			},
			poster: { //视频封面的图片网络资源地址，如果 controls 属性值为 false 则设置 poster 无效
				type: String,
				default: ''
			},
			event:{/*触发事件名*/
				playEvent: { //播放触发事件
					type: String,
					default: ''
				},
				endEvent: { //播放结束触发事件
					type: String,
					default: ''
				},
				errorEvent:{//视屏加载出现错误时触发
					type: String,
					default: ''
				},
				waitinEvent:{ //视频出现缓冲时触发事件
					type: String,
					default: ''
				}
			}
		},
		data() {
			return {
				DSpeed: { //倍速相关设置
					rMenu: false, //是否显示播放速度选项
					curRate: '1.0', //当前播放速度
				},
				PBar: {
					/*进度条相关设置*/
					dotSlide: 0, //进度
					dBWidth: 0, //进度条计算后宽度
				},
				VVideo: {
					/*时间相关信息*/
					currtime: '00:00', //当前播放时间 字符串 计算后
					druation: '00:00', //总时间 字符串 计算后
					durTime: 0, //总时间
					curTime: 0, //当前播放时间
					isPlay: false, //是否播放
					isFull: false, // 是否全屏
					isLock: false, //是否锁屏
					width: 0,
					height: 0
				},
				VIcon:{
					play:"",
					pause:"",
					downLock: "",
					upLock:"",
					full:"",
					efull:"",
					more:"",
					backup:"",
					loading:"",
					
				},				
				Phone:{
					screenWidth: 0,
					screenHeight: 0,
					windowWidth: 0,
					windowHeight: 0
				},
				vctx: null, //视频上下文
				lastTapTimeoutFun: null,
				lastTapDiffTime: 0, //双击视频播放还是暂停
				isMenu: true, //是否显示控制面板
				fullInfo:{
					direction: "vertical",
					fullScreen: false
				}, //全屏信息
				isLock: false //是否锁屏
			}
		},
		created() {
			var that = this;
			var sys = uni.getSystemInfoSync();
			that.Phone.screenWidth = sys.screenWidth;
			that.Phone.screenHeight = sys.screenHeight;
			that.Phone.windowWidth = sys.windowWidth;
			that.Phone.windowHeight = sys.windowHeight;
			that.PBar.dBWidth = that.Phone.screenWidth * 1.2;
		},
		computed: {
			ResVideoTitle() {
				let title = this.videoTitle;
				if (title.length > 39) {
					title = title.substr(0, 39);
					return title;
				} else {
					return title;
				}
			}
		},
		mounted() {
			//mounted = onReady 移动端使用 onReady方法
			var that = this;
			// #ifdef APP-NVUE || APP-PLUS || APP-PLUS-NVUE || H5
			that.vctx = uni.createVideoContext("svideo");
			// #endif
			// #ifdef MP-WEIXIN
			that.vctx = uni.createVideoContext("svideo", that);
			// #endif
			let doc = uni.createSelectorQuery().in(that).select('#svideo');
			doc.boundingClientRect(function(data) {
				that.VVideo.width = that._pxTorpx(data.width);
				that.VVideo.height = that._pxTorpx(data.height);
			}).exec();
		},
		methods: {
			_play: function(e) {
				//播放
				let that = this;
				that.VVideo.isPlay = true;
			},
			_pause: function(e) {
				//暂停
				let that = this;
				that.VVideo.isPlay = false;
			},
			vPlay:function(){
				let that = this;
				that.vctx.play();
			},
			vPause:function(){
				let that = this;
				that.vctx.pause();
			},
			vStop:function(){
				let that = this;
				that.vctx.stop();
			},
			_timeupdate: function(event) {
				var that = this;
				//播放进度变化时触发，event.detail = {currentTime, duration} 。触发频率 250ms 一次
				if(that.event.playEvent)
					that.$emit(that.event.playEvent, event.detail);
				that.PBar.dotSlide = (event.detail.currentTime / event.detail.duration) * that.PBar.dBWidth * 0.95;
				that.VVideo.druation = that._format(event.detail.duration);
				that.VVideo.currtime = that._format(event.detail.currentTime);
				that.VVideo.durTime = event.detail.duration;
				that.VVideo.curTime = event.detail.currentTime;
			},
			_ended:function(){//播放结束
				let that = this;
				if(that.event.endEvent)
					that.$emit(that.event.endEvent);
			},
			_fullscreenchange: function(e) {
				let that = this;
				//当视频进入和退出全屏时触发，event.detail = {fullScreen, direction}，direction取为 vertical 或 horizontal
				that.fullInfo.direction = e.detail.direction;
				that.fullInfo.fullScreen = e.detail.fullScreen;
				if(that.fullInfo.fullScreen)
				{
					that.PBar.dBWidth = that.Phone.screenHeight * 1.3;
					//that.PBar.dotSlide = (that.VVideo.curTime / that.VVideo.durTime) * that.PBar.dBWidth * 0.95;
				}
				else
				{
					that.PBar.dBWidth = that.Phone.screenWidth * 1.2;
					//that.PBar.dotSlide = (that.VVideo.curTime / that.VVideo.durTime) * that.PBar.dBWidth * 0.95;
				}
				that.VVideo.isFull = !that.VVideo.isFull;
			},
			_loadedmetadata: function(event) {
				let that = this;
				//初始化进度条显示时间  总时间
				that.VVideo.druation = that._format(event.detail.duration);
			},
			_waitin: function() {
				//视频出现缓冲时触发
				if(that.event.waitinEvent)
					that.$emit(that.event.waitinEvent);
			},
			_showSwitchRate: function(rate) {
				let that = this;
				that.DSpeed.rMenu = true;
			},
			_switchRate: function(e) {
				let that = this;
				let rate = Number(e.currentTarget.dataset.rate);
				that.DSpeed.curRate = rate;
				that.DSpeed.rMenu = false;
				that.vctx.playbackRate(rate * 1);
				if (!that.VVideo.isPlay) {
					that.vctx.play();
				}
			},
			_vclk: function() { //video点击事件 lastTapTimeoutFun
				let that = this;
				that.DSpeed.rMenu = false;
				let curTime = new Date().getTime();
				let lastTime = that.lastTapDiffTime;
				that.lastTapDiffTime = curTime;
				let diff = curTime - lastTime;
				if(diff < 300){
					//双击
					if (!that.VVideo.isPlay) {
						that.vctx.play();
					} else {
						that.vctx.pause();
					}
					clearTimeout(that.lastTapTimeoutFun);
				}else{
					//单击
					that.lastTapTimeoutFun = setTimeout(function(){
						that.isMenu = !that.isMenu;
					},300);
				}
			},
			_barclk:function(e){
				let that = this;
				if (e.touches.length !== 1) {
					return false;
				}
				//拖动完后播放
				 let doc = uni.createSelectorQuery().in(that).select('.video-control-bottom-bar-gray');
				 doc.boundingClientRect(function(data) {
					 that.PBar.dotSlide = that._pxTorpx(e.touches[0].clientX) - 206;
					// #ifdef MP-WEIXIN
					that.PBar.dotSlide = that._pxTorpx(e.touches[0].pageX) - 206;
					// #endif
					
					if (that.PBar.dotSlide <= 0) {
						//左边界
						that.PBar.dotSlide = 0;
					}
					let tw = that._pxTorpx(data.width);
					if (that.PBar.dotSlide >= tw) { //右边界
						that.PBar.dotSlide = tw;
					}
					let time = (that.PBar.dotSlide / tw) * that.VVideo.durTime;
					that.VVideo.curTime = time;
					that.VVideo.currtime = that._format(time);
					that.vctx.seek(time);
				 }).exec();
			},
			_error: function(e) {
				var that = this;
				//视频加载错误 提示信息
				if(that.event.errorEvent)
					that.$emit(that.event.errorEvent, e);
			},
			_format(a) {
				/*格式化时间*/
				var hh = parseInt(a / 3600);
				var mm = parseInt((a - hh * 3600) / 60);
				if (mm < 10) mm = "0" + mm;
				var ss = parseInt((a - hh * 3600) % 60);
				if (ss < 10) ss = "0" + ss;
				if (hh < 10) hh = hh == 0 ? '' : `0${hh}:`;
				var length = hh + mm + ":" + ss;
				if (a >= 0) {
					return length;
				} else {
					return "00:00";
				}
			},
			_playPause: function() {
				let that = this;
				if (!that.VVideo.isPlay) {
					that.vctx.play();
				} else {
					that.vctx.pause();
				}
			},
			_fullscree: function() { //vertical 或 horizontal
				let that = this;
				if (!that.fullInfo.fullScreen) {
					that.vctx.requestFullScreen();
				} else {
					that.vctx.exitFullScreen();
				}
			},
			_moveDot: function(e) {
				let that = this;
				//进度条移动点 触摸移动
				// 单指触摸 不是单指触摸不移动
				if (e.touches.length !== 1) {
					return false;
				}
				let doc = uni.createSelectorQuery().in(that).select('.video-control-bottom-bar-gray');
				doc.boundingClientRect(function(data) {
					that.PBar.dotSlide = that._pxTorpx(e.touches[0].clientX) - 206;
					// #ifdef MP-WEIXIN
					that.PBar.dotSlide = that._pxTorpx(e.touches[0].pageX) - 206;
					// #endif
					if (that.PBar.dotSlide <= 0) {
						//左边界
						that.PBar.dotSlide = 0;
					}
					let tw = that._pxTorpx(data.width);
					if (that.PBar.dotSlide >= tw) { //右边界
						that.PBar.dotSlide = tw;
					}
					let time = (that.PBar.dotSlide / tw) * that.VVideo.durTime;
					that.VVideo.curTime = time;
					that.VVideo.currtime = that._format(time);
					that.vctx.seek(time);
					//拖动完后播放
					that.vctx.play();
				}).exec();
			},
			_touchstartDot:function(e){},
			_touchendDot:function(e){},
			_backup:function(){
				if(this.fullInfo.fullScreen){
					this.vctx.exitFullScreen();
					return false;
				}
				uni.navigateBack();
			},
			_pxTorpx: function(num) {
				var that = this;
				return (750 / that.Phone.windowWidth) * num;
			},
			_rpxTopx: function(num) {
				var that = this;
				return num / (750 * that.Phone.windowWidth);
			},
			_lock: function() {
				var that = this;
				that.VVideo.isLock = !that.VVideo.isLock;
			},
			setTime: function(time) {/*设置视频初始化播放位置 参数 第一个 时间*/
				let that = this;
				if (time && time > 0) {
					that.vctx.seek(time);
				}
			},
			setSpeed: function(rate){/*设置播放速度*/
				let that = this;
				let rateS = Number(rate);
				that.DSpeed.curRate = rateS;
				that.vctx.playbackRate(rateS * 1);
			},
			setSrc:function(src){/*设置视频播放路径*/
				let that = this;
				if(src)
				{
					that.src = src;
				}
			},
			setPoster:function(poster){/*设置视频封面*/
				let that = this;
				if(poster)
				{
					that.poster = poster;
				}
			},
			setTitle:function(title){/*设置视频标题*/
				let that = this;
				if(title)
				{
					that.videoTitle = title;
				}
			},
			setVideoInfo:function(info){//设置视频信息
				let that = this;
				if(info){
					if(info.src)
						that.setSrc(info.src); //视频路径
					if(info.videoTitle)
						that.setTitle(info.videoTitle); //视频标题
					if(info.poster)
						that.setPoster(info.poster);//视频封面
					if(info.rate)
						that.setSpeed(info.rate);//视频播放速度
					if(obj.time) //播放起始时间
						that.setTime(info.time);
				}
			},
			getVideoInfo: function() {/*获取video信息*/
				var that = this;
				return {
					vTitle: that.videoTitle,
					/*视频标题*/
					vDurationTime: that.VVideo.durTime,
					/*视频总时长*/
					vCurrentTime: that.VVideo.curTime,
					/*视频当前播放时间*/
					vCurrentRate: that.DSpeed.curRate, 
					/*视频播放倍速*/
					vPoster: that.poster ,
					/*视频封面*/
					vSrc: that.src, 
					/*视频播放地址*/
					vCtx: that.vctx ,
					/*当前视频上下文*/
				};
			}
		}
	}
</script>

<style>
	/* @import "/static/shun-player/css/style.css"; */
	video {
		width: 100%;
	}
	
	video::-webkit-media-controls {
		display: none !important;
	}
	
	.bbl-content {
		width: 100%;
	}
	
	.bbl-content_video {
		width: 100%;
	}
	
	.uni-padding-wrap.uni-common-mt {
		width: 100%;
	}
	
	#myVideo {
		width: 100%;
	}
	
	.video {
		width: 100%;
	}
	
	.video-wrap {
		position: relative;
	}
	
	.multi-list.full-screen.vertical {
		height: 100vh !important;
		padding: 8vh 0;
	}
	
	.multi-list.full-screen.horizontal {
		height: 100vw !important;
		padding: 8vw 0;
	}
	
	.multi {
		position: absolute;
		right: 30rpx;
		top: 50%;
		transform: translateY(-50%);
		z-index: 998;
		width: 100rpx;
		color: red;
		padding: 10rpx 0;
		text-align: center;
		transition: color ease 0.3s;
	}
	
	.multi.rate {
		right: 30rpx;
		color: red;
	}
	
	.multi-list {
		position: absolute;
		height: 100%;
		width: 0;
		background-color: rgba(0, 0, 0, 0.65);
		top: 0;
		right: 0;
		transition: width 0.3s ease;
		z-index: 999;
		box-sizing: border-box;
		padding: 50rpx 0;
	}
	
	.multi-list.rate {
		padding: 25rpx 0;
	}
	
	.multi-list.active {
		width: 300rpx;
	}
	
	.multi-item {
		text-align: center;
		color: #fff;
		line-height: 80rpx;
		transition: color ease 0.3s;
	}
	
	.multi-item.rate {
		line-height: 65rpx;
	}
	
	.multi-item:hover,
	.multi:hover {
		color: #00d8ff;
	}
	
	.multi-item.active {
		color: #00d8ff;
	}
	
	.cuIcon-more.text-white {
		color: #FFFFFF;
		font-size: 40upx;
	}
	
	.video-contrl-top {
		height: 80upx;
		line-height: 80upx;
		min-height: 80upx;
		display: flex;
		padding: 0;
		z-index: 999;
		background-color: rgba(0, 0, 0, 0.1);
		background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0.1)));
		background: -o-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
		background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1));
	}
	
	.cu-list-tb {
		width: 60upx;
		height: 60upx;
		border-radius: 50%;
		background: #CCCCCC;
		padding: auto;
		margin: auto;
		text-align: center;
		height: auto;
		line-height: 60upx;
		align-items: center;
	}
	
	.cu-list {
		align-items: flex-start;
		justify-items: left;
		text-align: left;
		padding: 30upx 0;
	}
	
	.video-control {
		background-color: rgba(0, 0, 0, 0.2);
		height: 80upx;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 999;
		flex-direction: row;
		display: flex;
	}
	
	.video-control-back {
		position: relative;
		width: 60rpx;
		height: 100%;
		line-height: 80upx;
	}
	
	.video-control-back cover-image {
		position: absolute;
		top: 20rpx;
		left: 10rpx;
		width: 50%;
		height: 50%;
	}
	
	.video-control-text {
		color: #FFFFFF;
		width: 70%;
		height: 100%;
		text-align: left;
		line-height: 80upx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		word-break: break-all;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
	}
	
	.video-control-more {
		position: relative;
		height: 100%;
		width: 80upx;
		margin-left: 10%;
	}
	
	.video-control-more cover-image {
		position: absolute;
		top: 20rpx;
		left: 10rpx;
		width: 50%;
		height: 50%;
	}
	
	/* 底部栏样式 */
	.video-control-bottom {
		background-color: rgba(0, 0, 0, 0.2);
		height: 60rpx;
		position: absolute;
		padding-top: 10rpx;
		line-height: 60rpx;
		padding: 5upx;
		bottom: 0;
		left: 0;
		width: 100%;
		z-index: 999;
		display: flex;
		align-items: center;
		justify-items: center;
	}
	
	.video-control-bottom-playOrPause {
		height: 80%;
		width: 48rpx;
		align-items: center;
		justify-items: center;
		padding-top: 10rpx;
		flex-shrink: none;
	}
	
	.video-control-bottom-playOrPause cover-image {
		width: 80%;
		height: 80%;
		margin: auto;
	}
	
	.video-control-bottom-time {
		height: 80%;
		width: 185rpx;
		line-height: 48rpx;
		align-items: center;
		justify-items: center;
		text-align: center;
		margin-right: 10upx;
		flex-shrink: none;
		color: #FFFFFF;
		font-size: 20rpx;
	}
	
	.video-control-bottom-bar {
		height: 80%;
		line-height: 48rpx;
		align-items: center;
		justify-items: center;
		flex-shrink: none;
		padding-right: 10rpx;
	}
	
	.video-control-bottom-bar-gray {
		background-color: #FCF7E9;
		position: relative;
		height: 6rpx;
		line-height: 48rpx;
		width: 95%;
		top: 45%;
		left: 12.5rpx;
		right: 12.5rpx;
		border-radius: 5rpx;
	}
	
	.video-control-bottom-bar-color {
		height: 100%;
		line-height: 48rpx;
		background-color: #e54d42;
	}
	
	.video-control-bottom-bar-dot {
		position: relative;
		width: 28rpx;
		height: 28rpx;
		line-height: 28rpx;
		border-radius: 50%;
		top: 12%;
		background-color: rgba(255, 0, 0, 0.3);
		box-shadow: -1px 1px 1px 2px rgba(255, 255, 255, .1), -1px 1px 1px 0 rgba(0, 0, 0, 0.1) inset;
	}
	
	.video-control-bottom-bar-dot-pad {
		width: 14upx;
		height: 14upx;
		border-radius: 50%;
		background: #e54d42;
		/* box-shadow: 0 0 2px 0 rgba(0,0,0,0.2) inset; */
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		margin: auto;
	}
	
	.video-control-bottom-fullScree {
		height: 30rpx;
		width: 30rpx;
		flex-shrink: none;
		margin-right: 10rpx;
		z-index: 999;
	}
	
	.video-control-bottom-fullScree cover-image {
		width: 100%;
		height: 100%;
		z-index: 999;
	}
	
	.video-control-item {
		color: #CCCCCC;
		padding: 2rpx;
		margin-top: 10rpx;
		width: 100%;
	}
	
	.video-heizith-menu {
		position: absolute;
		right: 0;
		top: 20%;
		z-index: 998;
		/* background-color: rgba(0,0,0,0.1); */
		height: 100rpx;
		width: 80rpx;
		padding: 10rpx;
		padding-top: 30rpx;
		border-top-left-radius: 10rpx;
		border-bottom-left-radius: 10rpx;
		line-height: 200rpx;
		align-items: center;
		justify-items: center;
		text-align: center;
		flex-direction: row;
	}
	
	.video-fullScree-speed {
		margin-right: 40rpx;
		color: #FFFFFF;
		font-size: 25rpx;
		text-align: center;
		align-items: center;
	}
	
	.video-hz-lock {
		position: absolute;
		left: 50rpx;
		top: 45%;
		z-index: 998;
		background-color: rgba(0, 0, 0, 0.1);
		height: 50rpx;
		width: 50rpx;
		border-radius: 50%;
		padding: 10rpx;
	}
	
	.video-control-playOrPause {
		height: 48rpx;
		width: 48rpx;
		align-items: center;
		justify-items: center;
		padding-top: 10rpx;
		flex-shrink: none;
		border-radius: 50%;
		/* margin-top: 260rpx;
		margin-left: 30rpx; */
		background-color: rgba(0, 0, 0, 0.1);
		padding: 10rpx;
	}
</style>
